<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <div class="demo-input-size btnright">
          <div class="keyword">
            关键字
            <el-input
              class="boxlength"
              size="mini"
              placeholder="根据编号搜索"
              v-model="query.keyword"
            >
            </el-input>
          </div>
          <div>
            <el-button @click="clearContents">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </div>
        </div>

        <!-- 总数据 -->
        <div class="aggregate">
          <i class="el-icon-info"></i>
          <div class="da">
            <span>数据一共{{ this.piecesData }}条</span>
          </div>
        </div>

        <!-- 组件页面 -->
        <template>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="编号" />
            <el-table-column
              prop="questionType"
              :formatter="formatter"
              label="题型"
            />
            <el-table-column prop="questionIDs" label="题目编号">
              <template slot-scope="scope">
                <div
                  v-for="(item, index) in scope.row.questionIDs"
                  :key="index"
                >
                  <a v-html="item.number" style="color: #0099ff;" @click="preview(item.id)"></a>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="addTime" label="录入时间" />
            <el-table-column prop="totalSeconds" label="答题时间" />
            <el-table-column prop="accuracyRate" label="正确率" />
            <el-table-column prop="userName" label="录入人" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  :plain="true"
                  @click="delFn(scope.row.id)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>

        <!-- 底部分页 -->
        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[query.pagesize]"
            :page-size="query.size"
            layout=" prev, pager, next, sizes, jumper"
            :total="400"
          >
          </el-pagination>
        </div>

        <!-- 弹出框 -->
        <el-dialog
          title="题目预览"
          :visible.sync="showDialog"
          width="30%"
        >
          <popUp
          @clonsPop='showDialog=false'
          :tableData='tableData'
          ></popUp>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions'
import { questionType } from '@/api/hmmm/constants'
import popUp from './companys/questions-randoms-pop.vue'
export default {
  name: 'questions-randoms',
  data () {
    return {
      tableData: [], // 基础题库列表
      piecesData: 1, // 多少条数据
      query: {
        page: 1,
        pagesize: 20,
        keyword: '' // 搜索关键字
      },
      showDialog: false, // 弹出框
      roleId: '' // id
    }
  },
  components: {
    popUp
  },
  created () {
    this.randoms()
  },
  methods: {

    // 基础题库列表
    async randoms () {
      const res = await randoms(this.query)
      console.log(res)
      this.tableData = res.data.items
      this.piecesData = res.data.counts
      this.query = res.data
    },

    // 点击清除搜索
    clearContents () {
      this.query.input = ''
    },

    // 点击搜索
    search () {
      this.randoms()
    },

    // // 枚举
    formatter (row, column, cellValue, index) {
      // console.log(cellValue)
      const obj = questionType.find((item) => item.value === Number(cellValue))
      // console.log(obj)
      return obj.label
    },

    // 点击删除
    async delFn (id) {
      const confirmRes = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      // console.log(confirmRes)
      if (confirmRes === 'cancel') return this.$message('你取消了删除')

      await removeRandoms({ id })

      if (this.tableData.length === 1) {
        this.query.page--
      }

      this.$message.success('删除成功')

      this.randoms()
    },

    // 点击显示弹框
    preview (id) {
      this.showDialog = true
      this.roleId = id
    },

    handleSizeChange (newPage) {
      this.query.pagesize = newPage
      this.randoms()
    },

    handleCurrentChange (newSize) {
      this.query.page = newSize
      this.randoms()
    }
  }
}
</script>

<style scoped>
.boxlength {
  font-size: 13px;
  width: 300px;
  margin: 0 0 0 10px;
}
.btnright {
  display: flex;
  justify-content: space-between;
}
.aggregate {
  display: flex;
  margin-top: 10px;
  background-color: #f4f4f5;
  color: #909399;
  width: 100%;
  padding: 8px;
}
.da {
  display: table-cell;
  font-size: 12px;
  padding: 0 8px;
}
.page {
  margin-top: 10px;
  background-color: #f4f4f5;
}
.keyword {
  font-size: 12px;
  padding: 0 0 0 30px;
}
.block {
  margin-top: 10px;
  text-align: right;
}
</style>
